<template>
  <a-layout>
    <a-layout-header class="header">
      <h1 class="title">智慧工地后台管理系统</h1>
      <div class="hright">
        <div class="regis">{{ username }}</div>
        <button @click="exit">登出</button>
      </div>
    </a-layout-header>

    <!-- 左侧栏 -->
    <a-layout>
      <a-layout-sider width="250" style="background: #fff">
        <a-menu
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <template v-for="item in menudata" :key="item.directive">
            <a-sub-menu>
              <template #title>
                <span>
                  <user-outlined />
                  {{ item.title }}
                </span>
              </template>
              <a-menu-item
                v-for="sonitem in item.children"
                :key="sonitem.key"
                @click="menu(sonitem.click)"
                >{{ sonitem.title }}</a-menu-item
              >
            </a-sub-menu>
          </template>
        </a-menu>
      </a-layout-sider>

      <!-- 右侧 -->
      <a-layout>
        <a-layout-content
          :style="{
            background: '#fff',
            margin: 0,
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import getMenus from "../../grants/menudata";
// import {menudata} from "../../grants/menudata"
import {clearCurrentRoutes} from "../../grants/router";
import getRoutes from '../../grants/router';
const menudata = reactive(getMenus());


const $router = useRouter();

const selectedKeys2 = ref<string[]>(["1"]);
const openKeys = ref<string[]>(["sub1"]);

const username = ref(sessionStorage.getItem("username"));

const admin = ref("admin");
getRoutes();
const exit = () => {
  sessionStorage.clear();
  clearCurrentRoutes();//清楚当前用户的路由配置
  $router.push("/login");
};
function menu(s: any) {
  console.log(s);
  $router.push(s);
}
// const changeflo = () => {
//   $router.push("/mpage/flower");
// };
// const changebla = () => {
//   $router.push("/mpage/blackwhite");
// };
// const changeblack = () => {
//   $router.push("/mpage/black");
// };
// const zhanghao1 = () => {
//   $router.push("/mpage/zhanghao1")
// };
// const quanxian = () => {
//   $router.push("/mpage/quanxian")
// };
// const zidian = () => {
//   $router.push("/mpage/zidian")
// };
// const pmanage = () => {
//   $router.push("/mpage/pmanage");
// };
// const emanage = () => {
//   $router.push("/mpage/emanage");
// };
// const concrete = () => {
//   $router.push("/mpage/pinfo");
// }
// const kaoqin = () => {
//   $router.push("/mpage/kaoqin")
// };
// const guize = () => {
//   $router.push("/mpage/guize")

// }
// const jilu = () => {
//   $router.push("/mpage/jilu")
// }
// const dengji = () => {
//   $router.push("/mpage/dengji");
// };
// const classmange = () => {
//   $router.push("/mpage/classmange");
// };
// const zhanghao = () => {
//   $router.push("/mpage/zhanghao");
// };
</script>

<style scoped>
.ant-layout {
  width: 100%;
  height: 100%;
  display: flex;
}

.ant-layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: black;
}

.hright {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
}

.hright button {
  width: 80px;
  height: 35px;
  font-size: 16px;
  text-align: center;
  border-radius: 15px;
  background-color: rgb(122, 215, 122);
  margin-left: 10px;
  line-height: 35px;
  color: antiquewhite;
}

.title {
  color: burlywood;
  line-height: 100px;
}

.regis {
  font-size: large;
  color: azure;
}

.ant-layout-header {
  width: 100%;
  height: 100px;
}
</style>